<template>
  <div class="page">
    <div class="content">
      <div class="top">
        <h1>{{$t('绑定钱包')}}</h1>
        <h2>绑定你的{{ name }}钱包地址，绑定成功后你就可以快速方便的完成充值。</h2>
      </div>
      <group gutter="40px" class="group">
        <!-- <span>{{$t('账号')}}</span>
        <x-input type="tel" :readonly="true" v-model="phone"></x-input>
        <span>{{$t('钱包地址')}}*</span> -->
        <x-input type="text" :readonly="!showNext" :placeholder="$t('在此粘贴你的钱包地址')" v-model="myAddress"></x-input>
        <x-input type="number" v-show="showNext" v-model="code" :placeholder="$t('输入验证码')" :min="6" :max="6" class="weui-vcode">
          <x-button @click.native="sendCode" :disabled="disabled" slot="right" type="primary" mini>{{ btnText }}</x-button>
        </x-input>
      </group>
      <box gap="20px 0" v-show="showNext">
        <x-button class="next" @click.native="next()" :show-loading="loadNext">{{$t('下一步')}}</x-button>
      </box>
      <!--    -->
      <div class="transfer" v-show="showTransfer">
        <p>{{$t('请用上一步绑定的钱包地址向下方地址转账')}}</p>
        <p><i class="qrcode" @click="showQrCode=true"></i></p>
        <div class="address" v-clipboard="address" @success="isCopy(1)" @error="isCopy(0)" :key="1">{{ address }}</div>
        <p>
          <span>{{ coin }}</span>个{{ name }}
        </p>
        <p>*认证钱包所需{{ name }}不会退还，请注意。</p>
        <box gap="20px 0">
          <x-button class="donne" @click.native="doneConfirm">{{$t('我已转账')}}</x-button>
        </box>
      </div>
      <div class="wait" v-show="showDone">
        <p>okay，<br>{{ name }}到账一般需要五分钟左右的时间请耐心等待，让子弹飞一会儿~</p>
        <div class="loading">
          <div class="pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
    <foot></foot>
    <x-dialog v-model="showQrCode" class="dialog-demo" hide-on-blur>
      <div class="img-box">
        <qrcode :value="address" type="img"></qrcode>
      </div>
      <div @click="showQrCode=false">
        <span class="vux-close"></span>
      </div>
    </x-dialog>
  </div>
</template>



<script>
  import {
    Group,
    XInput,
    XButton,
    Box,
    Qrcode,
    XDialog
  } from 'vux'
  import heading from './common/header.vue'
  import foot from './common/foot.vue'
  export default {
    components: {
      Group,
      XInput,
      XButton,
      Box,
      heading,
      foot,
      Qrcode,
      XDialog
    },
    data() {
      return {
        phone: '',
        myAddress: '',
        showNext: true,
        showTransfer: false,
        showDone: false,
        loadNext: false,
        coin: '',
        address: '',
        showQrCode: false,
        code: '',
        btnText: '发送验证码',
        countdown: 60,
        disabled: false,
        type: null,
        name: ''
      }
    },
    mounted: function() {
      this.$nextTick(function() {
        this.type = this.$route.query.t
        this.name = this.$route.query.n
      });
    },
    methods: {
      // 点击下一步
      next() {
        if (this.myAddress && this.code) {
          this.loadNext = true
          this.$http
            .post(`/users/bindAddress`, {
              address: this.myAddress,
              code: this.code,
              type: this.type
            })
            .then(res => {
              this.loadNext = false
              if (res.code == 200) {
                // this.result = res.result;
                this.coin = res.result.code
                this.address = res.result.value
                this.showNext = false;
                this.showTransfer = true;
              } else {
                this.$vux.toast.text(res.msg)
              }
            })
            .catch(function(error) {});
        }
      },
      // 确认已转账
      doneConfirm() {
        var that = this
        this.$vux.confirm.show({
          title: '提示',
          content: '请转账完成后再点击哦',
          confirmText: '已转账',
          onConfirm() {
            that.done()
          }
        })
      },
      // 转账完成
      done() {
        this.showTransfer = false;
        this.showDone = true;
        var timeLimit = 0;
        var timer = setInterval(() => {
          // 10分钟超时
          if (timeLimit > 600) {
            clearInterval(timer)
            var that = this
            this.$vux.confirm.show({
              title: '提示',
              content: '绑定失败，请重试！',
              onCancel() {},
              onConfirm() {
                that.$router.replace('/bind');
              }
            })
            return
          }
          this.$http
            .get(`/users/isVerify`)
            .then(res => {
              if (res.code == 200) {
                if (res.result) {
                  this.$vux.toast.text('绑定成功')
                  clearInterval(timer)
                  this.$router.replace('/home');
                }
              } else {
                this.$vux.toast.text(res.msg)
              }
            })
            .catch(function(error) {
              clearInterval(timer)
            });
          timeLimit += 10
        }, 10000)
      },
      // 发送验证码
      sendCode() {
        this.$http.get(`/users/sendSecurityPasswordCode`).then((res) => {
          if (res.code == 200) {
            this.countDown60()
            this.$vux.toast.text(this.$t('验证码已发送'))
          } else {
            this.$vux.toast.text(res.msg)
          }
        }).catch(function(error) {});
      },
      countDown60() {
        var countdown = this.countdown
        if (countdown == 0) {
          this.disabled = false;
          this.btnText = this.$t('发送验证码')
          this.countdown = 60;
          return;
        } else {
          this.disabled = true;
          this.btnText = this.$t('重新发送') + "(" + countdown + ")";
          this.countdown--;
        }
        setTimeout(() => {
          this.countDown60()
        }, 1000)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    padding: 0;
    background: #00182c url(/static/bg2.jpg) no-repeat;
    background-size: contain;
  }
  .content {
    padding: 0 12px 50px;
  }
  .top {
    color: #fff; // text-align: justify;
    h1 {
      font-size: 60px;
      line-height: 1.2;
      padding: 60px 0 20px;
    }
    h2 {
      font-size: 24px;
      line-height: 1.4;
    }
  }
  .group {
    span {
      font-size: 14px;
      color: #ccc;
    }
  }
  .next {
    background-color: #659eec;
    color: #fff;
    width: 230px;
    height: 44px;
  }
  .transfer {
    text-align: center;
    color: #fff;
    font-size: 18px;
    .address {
      word-break: break-all;
      background: rgba(0, 0, 0, .3);
      border-radius: 5px;
      padding: 5px;
      margin: 5px 0;
      color: #fff;
    }
    span {
      color: $red;
      font-weight: 600;
    }
  }
  .donne {
    background-color: #659eec;
    color: #fff;
    width: 230px;
    height: 44px;
  }
  .wait {
    text-align: center;
    color: #fff;
    font-size: 18px;
  }
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
  .pacman {
    position: relative;
    transform: scale(1);
    margin: 0 auto;
  }
  .pacman>div:nth-child(2) {
    -webkit-animation: pacman-balls 1.1s -1.09s infinite linear;
    animation: pacman-balls 1.1s -1.09s infinite linear;
  }
  .pacman>div:nth-child(3) {
    -webkit-animation: pacman-balls 1.1s -0.73s infinite linear;
    animation: pacman-balls 1.1s -0.73s infinite linear;
  }
  .pacman>div:nth-child(4) {
    -webkit-animation: pacman-balls 1.1s -0.36s infinite linear;
    animation: pacman-balls 1.1s -0.36s infinite linear;
  }
  .pacman>div:nth-child(5) {
    -webkit-animation: pacman-balls 1.1s 0s infinite linear;
    animation: pacman-balls 1.1s 0s infinite linear;
  }
  .pacman>div:first-of-type {
    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid $tmorange;
    border-left: 25px solid $tmorange;
    border-bottom: 25px solid $tmorange;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_up 0.6000000000000001s 0s infinite;
    animation: rotate_pacman_half_up 0.6000000000000001s 0s infinite;
    position: relative;
    left: -30px;
  }
  .pacman>div:nth-child(2) {
    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid $tmorange;
    border-left: 25px solid $tmorange;
    border-bottom: 25px solid $tmorange;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_down 0.6000000000000001s 0s infinite;
    animation: rotate_pacman_half_down 0.6000000000000001s 0s infinite;
    margin-top: -50px;
    position: relative;
    left: -30px;
  }
  .pacman>div:nth-child(3),
  .pacman>div:nth-child(4),
  .pacman>div:nth-child(5),
  .pacman>div:nth-child(6) {
    background-color: $tmorange;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    -webkit-transform: translate(0, -6.25px);
    transform: translate(0, -6.25px);
    top: 25px;
    left: 70px;
  }
  @-webkit-keyframes rotate_pacman_half_up {
    0% {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
    }
    50% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    100% {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
    }
  }
  @keyframes rotate_pacman_half_up {
    0% {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
    }
    50% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    100% {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
    }
  }
  @-webkit-keyframes rotate_pacman_half_down {
    0% {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    50% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
  }
  @keyframes rotate_pacman_half_down {
    0% {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    50% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
  }
  @-webkit-keyframes pacman-balls {
    75% {
      opacity: 0.7;
    }
    100% {
      -webkit-transform: translate(-100px, -6.25px);
      transform: translate(-100px, -6.25px);
    }
  }
  @keyframes pacman-balls {
    75% {
      opacity: 0.7;
    }
    100% {
      -webkit-transform: translate(-100px, -6.25px);
      transform: translate(-100px, -6.25px);
    }
  }
  .img-box {
    padding: 30px 0 10px;
  }
  .qrcode {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url() no-repeat;
    background-size: 100%;
  }
</style>

<style lang="scss">
  .group {
    .weui-cell {
      padding: 0;
      margin-bottom: 15px;
      height: 44px;
      border-radius: 5px;
      background: #fff;
      &:before {
        display: none;
      }
      &:after {
        display: none;
      }
      input:read-only {
        background: #ccc;
        color: $gray;
        border-radius: 5px;
      }
    }
    .weui-input {
      height: 44px;
      color: #00162b;
      padding: 0 12px;
      font-size: 16px;
    }
    .weui-cells {
      background-color: transparent;
      &:before {
        display: none;
      }
      &:after {
        display: none;
      }
    }
  }
</style>
